<template>
    <div v-loading="loading" class="menu">
        <div class="menu-top">
            <p>菜单名称</p>
            <el-input v-model="title" placeholder="请输入关键词"></el-input>
            <p>状态</p>
            <el-select v-model="Status" placeholder="请选择">
                <el-option
                    v-for="item in StatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-button size="small" type="primary" @click="GetSearch()">搜索</el-button>
            <el-button plain size="small" @click="GetResetting()">重置</el-button>
        </div>
        <div class="menu-add">
            <el-button icon="el-icon-plus" size="small" type="primary" @click="AddMenu()">添加</el-button>
            <el-button icon="el-icon-s-operation" size="small" type="info" @click="toggleExpand()">展开/折叠
            </el-button>
        </div>
        <div class="menu-center">
            <el-table
                :data="tableData"
                :default-expand-all="false"
                :expand-row-keys="expandKeys"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                border

                height="500"
                row-key="id" style="width: 100%"
                @row-expand="onRowExpand">
                <el-table-column label="名称" prop="title" sortable>

                </el-table-column>
                <el-table-column label="图标" prop="title" sortable>
                    <template slot-scope="scope">
                        <i :class="scope.row.icon"></i>
                    </template>
                </el-table-column>
                <el-table-column label="排序" prop="listorder" sortable>

                </el-table-column>
                <el-table-column label="路径" prop="path" sortable>

                </el-table-column>
                <el-table-column label="状态" prop="status" sortable>
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status">正常</el-tag>
                        <el-tag v-else type="danger">禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" prop="status" sortable width="300">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-edit" size="mini" type="primary" @click="UpdateMenu(scope.row)">修改
                        </el-button>
                        <!--                        <el-button icon="el-icon-plus" size="mini" type="success" @click="GetChildAdd(scope.row)">新增-->
                        <!--                        </el-button>-->
                        <el-button icon="el-icon-delete" size="mini" type="danger" @click="DeleteMenu(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            a
            <div class="pages">
                <el-pagination :current-page="currentpage"
                               :page-size="num"
                               :total="total"
                               background
                               layout="prev, pager, next"
                               @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: "menuIndex",
    data() {
        return {
            expandKeys: [],
            isExpanded: true,
            title: "",
            tableData: [],
            Status: '',
            page: 1,
            num: 10,
            total: 1,
            currentpage: 1,
            loading: true,
            parentid: "",
            StatusList: [
                {
                    label: "启用",
                    value: 1
                }, {
                    label: "禁用",
                    value: 0
                }
            ]
        }
    },
    mounted() {
        this.initPageData()
        this.loading = false
    },
    methods: {
        // 修改
        UpdateMenu(item) {
            this.$router.push('/menu/edit?id=' + item.id)
        },

        // 搜索
        GetSearch() {
            this.initPageData()
        },
        //新增
        GetChildAdd(item) {
            console.log(item)
        },
        // 删除栏目
        DeleteMenu(item) {

            if (item.children.length > 0) {
                this.$Msg.message("该栏目有子分类，无法删除", 'error')
                return
            }
            this.$Msg.openConfirm('确定要删除吗？', 'warning', () => {
                this.loading = true
                this.$http.HttpGet("v1/DeleteMenu?id=" + item.id).then((res) => {
                    if (res.code == 0) {
                        this.$Msg.message(res.msg)
                        setTimeout(() => {
                            this.loading = false
                            // this.$router.go(0)
                            this.initPageData()
                        }, 150)
                    } else {
                        this.$Msg.message(res.msg, 'error')
                        this.loading = false
                    }
                })

            }, () => {
                // Msg.message('退', 'error')
            })

        },
        toggleExpand() {
            this.isExpanded = !this.isExpanded;
            if (this.isExpanded) {
                this.expandKeys = this.tableData.map((item, index) => index);
            } else {
                this.expandKeys = [];
            }
        },
        onRowExpand(row, expandedRows) {
            this.expandKeys = expandedRows.map((item) => item.$index);
        },
        // 分页
        handleCurrentChange(v) {
            this.page = v
            this.currentpage = v
            this.initPageData()
        },

        // 重置
        GetResetting() {
            this.Status = ''
            this.title = ''

        },
        //初始化数据
        initPageData() {
            let data = {
                status: this.Status,
                page: this.page,
                num: this.num,
                title: this.title
            }

            this.$http.HttpPost("v1/GetMenuList", data).then((res) => {

                if (res.code == 0) {
                    this.tableData = res.data
                    this.total = res.count
                    this.dialogVisibleAdd = false
                } else {
                    this.$Msg.message(res.msg)
                }


            })
        },

        // 添加
        AddMenu() {
            this.$router.push('/menu/add')
        },
        handleClose1(done) {
            done()
            for (var i = 0; i < this.editField.length; i++) {
                this.editField[i].fielddata = ''
            }
        },
        handleClose(done) {
            done()
            this.$refs.add.clearForm()

        }
    }
}
</script>

<style scoped>
.menu-top {
    width: 100%;
    display: flex;
    height: 50px;
    align-items: center;
}

.menu-top p {
    /*width: 100px;*/
    font-size: 16px;
    font-weight: 700;
    color: #666;
    text-align: center;
    margin: 0 10px;
}

.menu-top .el-select {
    margin-right: 10px;
}

.menu-top .el-input {
    width: 300px;
}

.menu-add {
    margin: 15px 0;
}

.menu-center .title {
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    cursor: pointer;
}
</style>
